<template>
	<div class="workflow">
		<zoom v-model="zoom" />
		<div class="workflow-layout">
			<div
				class="box-scale"
				id="box-scale"
				:style="{ transform: `scale(${zoom / 100})` }"
				v-if="nodeConfig.nodeName"
			>
				<flow-nodes
					:node-config.sync="nodeConfig"
					:flow-permission.sync="flowPermission"
					:is-tried.sync="isTried"
				/>
				<div class="end-node">
					<div class="end-node-circle"></div>
					<div class="end-node-text">流程结束</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import Zoom from "./zoom.vue";
import FlowNodes from "./flow-nodes.vue";

export default {
	name: "oa-workflow",
	components: {
		Zoom,
		FlowNodes
	},
	props: {
		data: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			zoom: 100,
			processConfig: {},
			nodeConfig: {},
			flowPermission: [],
			directorMaxLevel: 0,
			workFlowDef: {},
			workFlowType: 1,
			isTried: false,
			tipList: [],
			tipVisible: false
		};
	},
	watch: {
		data: {
			deep: true,
			handler() {
				this.init();
			}
		}
		// nodeConfig: {
		// 	deep: true,
		// 	handler(v) {
		// 		this.reErr(v);
		// 	}
		// }
	},
	created() {
		this.init();
	},
	methods: {
		init() {
			let { data } = this;
			this.processConfig = data;
			this.nodeConfig = data.nodeConfig;
			this.flowPermission = data.flowPermission || [];
			this.directorMaxLevel = data.directorMaxLevel;
			this.workFlowDef = data.workFlowDef;
		}
	}
};
</script>
<style lang="scss" scoped>
.workflow {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: relative;
	button {
		cursor: pointer;
	}
	::v-deep {
		* {
			box-sizing: border-box;
		}
	}
	&-layout {
		background: #f5f5f7;
		width: 100%;
		position: absolute;
		overflow: auto;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		.box-scale {
			width: 100%;
			position: relative;
			padding: 54.5px 0;
			display: inline-block;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			flex-wrap: wrap;
			min-width: min-content;
			transform: scale(1);
			transform-origin: top left 0;
			.end-node {
				border-radius: 50%;
				font-size: 14px;
				color: rgba(25, 31, 37, 0.4);
				text-align: left;
				.end-node-circle {
					width: 10px;
					height: 10px;
					margin: auto;
					border-radius: 50%;
					background: #dbdcdc;
				}
				.end-node-text {
					margin-top: 5px;
					text-align: center;
				}
			}
		}
	}
}
</style>
